<template>
  <view class="empire-container">
    <!-- 顶部资源栏 -->
    <view class="resource-bar">
      <view class="resource-item" v-for="(amount, type) in resources" :key="type">
        <image class="resource-icon" :src="getResourceIcon(type)" mode="aspectFit"></image>
        <text class="resource-amount">{{amount}}</text>
      </view>
    </view>

    <!-- 建筑列表 -->
    <scroll-view class="building-list" scroll-y>
      <view 
        class="building-card"
        v-for="building in buildings"
        :key="building.id"
        @click="goToBuildingDetail(building)"
      >
        <image class="building-image" :src="building.image" mode="aspectFit"></image>
        <view class="building-info">
          <text class="building-name">{{building.name}} Lv.{{building.level}}</text>
          <text class="building-status" :class="building.status">{{getStatusText(building.status)}}</text>
        </view>
        <view class="upgrade-queue" v-if="isInQueue(building.id)">
          <text class="queue-position">队列 #{{getQueuePosition(building.id)}}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 升级队列 -->
    <view class="upgrade-queue-panel" v-if="upgradeQueue.length > 0">
      <text class="queue-title">升级队列 ({{upgradeQueue.length}}/{{maxQueueSize}})</text>
      <view class="queue-list">
        <view 
          class="queue-item"
          v-for="(item, index) in upgradeQueue"
          :key="item.buildingId"
        >
          <text class="queue-building-name">{{getBuildingName(item.buildingId)}}</text>
          <text class="queue-time">{{formatTime(item.remainingTime)}}</text>
          <button 
            class="speed-up-btn"
            @click="speedUpQueue(item.buildingId)"
            v-if="index === 0"
          >
            加速
          </button>
        </view>
      </view>
    </view>

    <!-- 返回按钮 -->
    <view class="back-btn" @click="goBack">
      <text class="back-text">返回首页</text>
    </view>
  </view>
</template>

<script>
import { BUILDING_TYPES, BUILDING_TEMPLATES, SPEED_UP_ITEMS } from '@/config/buildings.js'

export default {
  data() {
    return {
      resources: {
        gold: 10000,
        wood: 5000,
        stone: 3000,
        iron: 2000,
        diamond: 100
      },
      buildings: [
        {
          id: '1',
          type: 'resource',
          name: '木材厂',
          level: 1,
          image: '/static/buildings/lumber-mill.png',
          status: 'normal',
          effects: {
            wood: 10 // 每小时产出
          }
        },
        {
          id: '2',
          type: 'resource',
          name: '采石场',
          level: 1,
          image: '/static/buildings/quarry.png',
          status: 'normal',
          effects: {
            stone: 8
          }
        },
        {
          id: '3',
          type: 'military',
          name: '兵营',
          level: 1,
          image: '/static/buildings/barracks.png',
          status: 'normal',
          effects: {
            troops: 5
          }
        }
      ],
      upgradeQueue: [],
      maxQueueSize: 2,
      speedUpItems: SPEED_UP_ITEMS
    }
  },
  methods: {
    getResourceIcon(type) {
      const icons = {
        gold: '/static/icons/gold.png',
        wood: '/static/icons/wood.png',
        stone: '/static/icons/stone.png',
        iron: '/static/icons/iron.png',
        diamond: '/static/icons/diamond.png'
      }
      return icons[type]
    },
    goToBuildingDetail(building) {
      uni.navigateTo({
        url: `/pages/empire/building?id=${building.id}`
      })
    },
    getStatusText(status) {
      const statusMap = {
        normal: '空闲',
        upgrading: '升级中',
        working: '工作中'
      }
      return statusMap[status] || '未知'
    },
    isInQueue(buildingId) {
      return this.upgradeQueue.some(item => item.buildingId === buildingId)
    },
    getQueuePosition(buildingId) {
      return this.upgradeQueue.findIndex(item => item.buildingId === buildingId) + 1
    },
    getBuildingName(buildingId) {
      const building = this.buildings.find(b => b.id === buildingId)
      return building ? building.name : '未知建筑'
    },
    formatTime(seconds) {
      const hours = Math.floor(seconds / 3600)
      const minutes = Math.floor((seconds % 3600) / 60)
      return `${hours}小时${minutes}分钟`
    },
    speedUpQueue(buildingId) {
      uni.showActionSheet({
        itemList: this.speedUpItems.map(item => item.name),
        success: (res) => {
          const selectedItem = this.speedUpItems[res.tapIndex]
          this.applySpeedUp(buildingId, selectedItem)
        }
      })
    },
    applySpeedUp(buildingId, speedUpItem) {
      const queueItem = this.upgradeQueue.find(item => item.buildingId === buildingId)
      if (!queueItem) return
      
      queueItem.remainingTime = Math.max(0, queueItem.remainingTime - speedUpItem.value)
      if (queueItem.remainingTime === 0) {
        this.completeUpgrade(buildingId)
      }
    },
    completeUpgrade(buildingId) {
      this.upgradeQueue = this.upgradeQueue.filter(item => item.buildingId !== buildingId)
      
      const building = this.buildings.find(b => b.id === buildingId)
      if (building) {
        building.level += 1
        building.status = 'normal'
        this.applyUpgradeEffects(building)
      }
      
      this.saveGameState()
    },
    applyUpgradeEffects(building) {
      const template = BUILDING_TEMPLATES[building.id]
      const type = BUILDING_TYPES[building.type]
      
      if (type && template) {
        Object.keys(building.effects).forEach(effect => {
          const bonus = type.upgradeEffects[effect + 'Bonus'] || 1.2
          building.effects[effect] = Math.floor(building.effects[effect] * bonus)
        })
      }
    },
    saveGameState() {
      const gameState = {
        resources: this.resources,
        buildings: this.buildings,
        upgradeQueue: this.upgradeQueue
      }
      uni.setStorageSync('empireGameState', JSON.stringify(gameState))
    },
    loadGameState() {
      const gameState = uni.getStorageSync('empireGameState')
      if (gameState) {
        const state = JSON.parse(gameState)
        this.resources = state.resources
        this.buildings = state.buildings
        this.upgradeQueue = state.upgradeQueue
      }
    },
    goBack() {
      uni.navigateBack()
    }
  },
  onLoad() {
    this.loadGameState()
  },
  onShow() {
    this.saveInterval = setInterval(() => {
      this.saveGameState()
    }, 60000)
  },
  onHide() {
    if (this.saveInterval) {
      clearInterval(this.saveInterval)
    }
  }
}
</script>

<style>
.empire-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
  position: relative;
}

.resource-bar {
  display: flex;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.95);
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.resource-item {
  display: flex;
  align-items: center;
}

.resource-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.resource-amount {
  font-size: 28rpx;
  color: #333;
}

.building-list {
  height: calc(100vh - 400rpx);
}

.building-card {
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  position: relative;
}

.building-image {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
}

.building-info {
  flex: 1;
}

.building-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.building-status {
  font-size: 24rpx;
  color: #666;
}

.building-status.upgrading {
  color: #ff9800;
}

.upgrade-queue-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
}

.queue-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.queue-building-name {
  font-size: 28rpx;
  color: #333;
}

.queue-time {
  font-size: 24rpx;
  color: #666;
}

.speed-up-btn {
  font-size: 24rpx;
  padding: 6rpx 20rpx;
  background: #FFD700;
  color: #333;
  border-radius: 30rpx;
  border: none;
}

.back-btn {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  padding: 16rpx 40rpx;
  border-radius: 40rpx;
  z-index: 100;
}

.back-text {
  color: white;
  font-size: 28rpx;
}
</style> 